/*
 * screenshot.js
 *	绘图工具类，主要实现区域选择并保存选择后的区域并存储为图片
 * 1> 优先执行screenshot.constructor函数
 *		此函数是用来配置初始化展示使用的
 * 2> 执行screenshot.getImagePortion 截取选定区域的图像
 * Author： 吴元森 15909910367@163.com
 * Version: 0.1.2
 */
var screenshot = {
	/**
	 * 初始化构造函数
	 */
	constructor: function(canvas,options){
		const me = this;
			canvas.width = options.width;
			canvas.height = options.height;
		me.context = canvas.getContext('2d');
		//填充图片到绘制区域
		me.image = new Image();
		me.image.setAttribute('crossOrigin', 'anonymous');//解决跨域导致canvas脏读
		me.image.src = options.sourceImg,
		me.image.width = options.width;
		me.image.height = options.height;
		me.image.onload = function () {
			me.context.drawImage(me.image, 0, 0, options.width, options.height);
		};
		//绘制需要获取的区域模板
		for(let point = 0;point < options.drawAreaArray.length;point++){
			var b = options.drawAreaArray[point];
			me.__createDrawArea(b[0],b[1],b[2],b[3]);
		}
	},
	/**
	 * 绘制截图区域
	 * @params {Int} width 截图宽度
	 * @params {int} height 截图高度
	 * @params {int} x 截取位置x轴
	 * @params {int} y 截取位置y轴
	 */
	__createDrawArea : function(width,height,x_,y_){
		let drawArea = document.createElement('div');
		let x = 0;
		let y = 0;
		let l = 0;
		let t = 0;
		drawArea.className = 'drawArea';
		drawArea.name = 'drawarea',
		drawArea.setAttribute('style','width:'+width+'px;height:'+height+'px;top:'+x_+'px;left:'+y_+'px;');
		drawArea.isDown = false;
		drawArea.onmousedown = function(e) {
			drawArea.isDown = true;
		    x = e.clientX;
		    y = e.clientY;
		    //获取左部和顶部的偏移量
		    l = drawArea.offsetLeft;
		    t = drawArea.offsetTop;
		    //开关打开
		    isDown = true;
		    //设置样式  
		    drawArea.style.cursor = 'move';
		};
		//鼠标移动
		drawArea.onmousemove = function(e) {
			if (drawArea.isDown == false) {
		        return;
		    }else{
			    //获取x和y
			    var nx = e.clientX;
			    var ny = e.clientY;
			    //计算移动后的左偏移量和顶部的偏移量
			    var nl = nx - (x - l);
			    var nt = ny - (y - t);

			    drawArea.style.left = nl + 'px';
			    drawArea.style.top = nt + 'px';
		    }
		}
		//鼠标抬起事件
		drawArea.onmouseup = function() {
		    drawArea.isDown = false;
		    drawArea.style.cursor = 'default';
		}
		document.body.appendChild(drawArea);
	},
	/**
	 * 截图图片
	 * @params {Element} canvas 画布
	 * 注意截图有偏移
	 */
	getImagePortion(canvas){
		const me = this;
		let areaArray = document.getElementsByClassName('drawArea');
		for(let i=0;i<areaArray.length;i++){
            let dragDiv = areaArray[i];
			let sx = dragDiv.offsetLeft;
            let sy = dragDiv.offsetTop;
            let ctx = document.createElement('canvas');
            ctx.width=dragDiv.clientWidth;
            ctx.height = dragDiv.clientHeight;
            let imgCtx = ctx.getContext('2d');
            imgCtx.clearRect(0,0,dragDiv.width,dragDiv.height);  
            imgCtx.drawImage(canvas, sx, sy, dragDiv.clientWidth, dragDiv.clientHeight, 0, 0, dragDiv.clientWidth, dragDiv.clientHeight);
            let b = ctx.toDataURL();
            console.log(b);
		}
	}
};